<template>
    <div ref="canvas">

    </div>
    <button @click="xr"> 渲染</button>
</template>
<script setup>
import * as THREE from 'three';

let scene, camera, controls, renderer;

let axesHelper;

const canvas = ref(null)
onMounted(() => {
    // 设置加载管理器
    const event = {};
    event.onLoad = () => {

        render(); //当材质图片加载完成，重新渲染一下

    };



    renderer = new THREE.WebGLRenderer({ antialias: true }); // 创建渲染器对象
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight); //设置渲染区域尺寸
    console.log(canvas.value)
    canvas.value.appendChild(renderer.domElement); //body元素中插入canvas对象


    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x909399);
    camera = new THREE.PerspectiveCamera(
        35,
        window.innerWidth / window.innerHeight,
        1,
        1000
    );
    camera.position.set(0, 5, 100);

    // controls = new OrbitControls(camera, renderer.domElement);
    // controls.addEventListener('change', render); //监听鼠标、键盘事件

    // 环境光
    const ambient = new THREE.AmbientLight(0xffffff, 1);
    scene.add(ambient);
    console.log(THREE)
    // 几何体
    // const box =new THREE.BoxBufferGeometry(10, 10, 10); //正方体六面
    const box = new THREE.BoxGeometry(10, 10, 10); //正方体六面
    const ball = new THREE.SphereGeometry(5, 16, 8); //球一面
    const circle = new THREE.CircleGeometry(5, 32); //圆形一面
    const cylinder = new THREE.CylinderGeometry(5, 5, 20, 32); //圆柱

    // 材质
    const texture = new THREE.TextureLoader();

    const rightTexture = texture.load('/static/shang.jpg', event.onLoad);
    const leftTexture = texture.load('/static/xia.jpg', event.onLoad);
    const topTexture = texture.load('/static/zuo.jpg', event.onLoad);
    const bottomTexture = texture.load('/static/you.jpg', event.onLoad);
    const frontTexture = texture.load('/static/qian.jpg', event.onLoad);
    const backTexture = texture.load('/static/hou.jpg', event.onLoad);

    // 定义材质常量，如果你想单独修改某个材质，请重新创建，否则修改了下面的某一个，其它运用到这个材质的地方也会变噢
    const right_material = new THREE.MeshPhongMaterial({
        // color: 0x00fa9a,
        map: rightTexture
    });
    const left_material = new THREE.MeshPhongMaterial({
        // color: 0x00fa9a,
        map: leftTexture
    });
    const top_material = new THREE.MeshPhongMaterial({
        // color: 0x00fa9a,
        map: topTexture
    });
    const bottom_material = new THREE.MeshPhongMaterial({
        //  color: 0x00fa9a,
        map: bottomTexture
    });
    const front_material = new THREE.MeshPhongMaterial({
        // color: 0x00fa9a,
        map: frontTexture,
        side: THREE.DoubleSide
    });
    const front_material_color = new THREE.MeshPhongMaterial({
        color: 0x00fa9a,
        map: frontTexture,
        side: THREE.DoubleSide
    });
    const back_material = new THREE.MeshPhongMaterial({
        color: 0x00fa9a,
        map: backTexture
    });

    // 正方体
    const mesh_box = new THREE.Mesh(box, [right_material, left_material, top_material, bottom_material,
        front_material_color, back_material]);

    // 球
    const mesh_ball = new THREE.Mesh(ball, front_material);
    // 圆
    const mesh_circle = new THREE.Mesh(circle, front_material);
    // 圆柱体
    const mesh_cylinder = new THREE.Mesh(cylinder, [front_material, top_material, bottom_material]);

    mesh_box.position.set(- 32, 0, 0);
    mesh_ball.position.set(- 16, 0, 0);
    mesh_circle.position.set(0, 0, 0);
    mesh_cylinder.position.set(16, 0, 0);

    scene.add(mesh_box);
    scene.add(mesh_ball);
    scene.add(mesh_circle);
    scene.add(mesh_cylinder);

    // render();





    let onWindowResize = () => {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        render.setSize(window.innerWidth, window.innerHeight);

    }

    let render = () => {

        // requestAnimationFrame(render);
        // mesh_ball.rotation.x += 0.01;
        mesh_ball.rotation.y += 0.01;
        mesh_box.rotation.x += 0.001;
        mesh_box.rotation.y += 0.001;
        mesh_circle.rotation.x += 0.01;
        mesh_circle.rotation.y += 0.01;
        mesh_cylinder.rotation.x += 0.01;
        mesh_cylinder.rotation.y += 0.01;
        renderer.render(scene, camera); //执行渲染操作
        requestAnimationFrame(render)

    }

    let buildHelper = () => {

        // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
        axesHelper = new THREE.AxesHelper(250);
        scene.add(axesHelper);

    }


    buildHelper();

    render();
    window.addEventListener('resize', onWindowResize);
})


function xr() {
    init();

    buildHelper();

    render();
}
</script>